<template>
  <div class="song-sheets">
    <!-- 返回上一层路由 -->
    <i class="iconfont icon-fanhui2 btn-back" @click="$router.back()"> 歌单</i>

    <div>
      <song-sheet-desc :item="songCover"></song-sheet-desc>
    </div>

    <h3 class="title">歌曲列表</h3>
    <div class="song-list">
      <single-song v-for="(item, i) in songsList" :key="i" :item="item" :song="song" :paused="paused"
        @click.native="$emit('change-current-song', { song: item, songList: songsList })">
        <template #rank>
          <div class="num">{{ i + 1 }}</div>
        </template>
        <template #sq><span></span></template>

      </single-song>
      <!-- <div class="bottom-more">查看更多歌曲，请下载客户端 > </div> -->
    </div>

    <h3 class="title">精彩评论</h3>
    <comment-list v-for=" (item, i) in commentList" :key="i" :comment="item"></comment-list>

    <div class="look-more"><span>加载更多</span></div>
  </div>
</template>

<script>
import SongSheetDesc from '@/components/SongSheetDesc.vue';
import SingleSong from '@/components/SingleSong.vue';
import CommentList from '@/components/CommentList.vue';
export default {
  props: {
    song: Object,
    paused: Boolean
  },

  data() {
    return {
      songsList: [],
      songCover: null,
      commentList: []
    }
  },

  created() {
    let id = this.$route.query.id

    // 顶部介绍的详情
    this.axios.get(`playlist/detail?id=${id}`).then(({ data }) => {
      this.songCover = data.playlist
    })

    // 歌单接口
    this.axios.get(`playlist/track/all?id=${id}&limit=10`).then(({ data }) => {
      this.songsList = data.songs
    })

    // 评论数据接口
    this.axios.get(`comment/playlist?id=${id}`).then(({ data }) => {
      this.commentList = data.hotComments
    })
  },

  components: {
    SongSheetDesc,
    SingleSong,
    CommentList,
  },

  computed: {},

  methods: {}
}
</script>
<style lang='scss'>
$grey: #888;

.song-sheets {
  margin-bottom: 50px;

  .btn-back {
    position: fixed;
    top: 5px;
    left: 5px;
    color: #fff;
    font-size: 18px;
    text-align: center;
    z-index: 999;
  }

  .title {
    height: 23px;
    padding: 0 10px;
    background-color: #eeeff0;
    color: #666;
    font-size: 12px;
    font-weight: 500;
    line-height: 23px;
  }

  .num {
    width: 26px;
    text-align: center;
    margin-right: 10px;
    font-size: 17px;
    color: $grey;
  }

  .bottom-more {
    height: 21px;
    font-size: 14px;
    color: $grey;
    text-align: center;
    line-height: 21px;
  }

  .song-n {
    color: #333;
    font-size: 17px;
  }

  .look-more {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 18px 0;

    span {
      font-size: 14px;
      color: #999;
    }
  }
}
</style>